<template>
    <div class="header">
        <div class="logo">
            <span class="logo_prefix">B游汇管理</span>
            <span class="logo_suffix">Admin</span>
            <div class="collapse-btn" @click="collapseChage">
                <i class="el-icon-menu"></i>
            </div>
        </div>
        <div class="user-header">
            <el-dropdown trigger="click" menu-align="start" class="userMsg">
                <img src="./header-icon.jpg" class="header-icon">
                <div class="welcome" :title="loginInfo.username">
                    <span>欢迎</span>
                    <span class="name">{{loginInfo.username}}</span>
                </div>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item >
                        <div class="setting-div">
                            <span class="setting-string">修改信息</span>
                        </div>
                    </el-dropdown-item>
                    <el-dropdown-item divided>
                        <div class="setting-div">
                            <span class="setting-string" @click="loginOut()">退出</span>
                        </div>
                        
                    </el-dropdown-item>
                    
                </el-dropdown-menu>
            </el-dropdown>
        </div>
        <!-- <div class="notice">
            <el-row>
                <el-col :span="6" style="padding:0 6px;margin:0 10px;">
                    <el-dropdown menu-align="start" >
                        <span>
                            <el-badge :value="5" class="item">
                                <i class="el-icon-message"></i>
                            </el-badge>
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item >
                               <span class="pop-title">您收到了5封邮件</span>
                            </el-dropdown-item>

                            <el-dropdown-item divided>
                                <div class="pop-div">
                                    <span>这是第一封邮件</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <div class="pop-div">
                                    <span>这是第二封邮件</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <div class="pop-div">
                                    <span>这是第三封邮件</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <div class="pop-div">
                                    <span>这是第四封邮件</span>
                                </div>
                            </el-dropdown-item>
                            <el-dropdown-item divided>
                                <div class="pop-div">
                                    <span>这是第五封邮件</span>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
                <el-col :span="6" style="padding:0 6px;margin:0 10px;">
                    <el-dropdown menu-align="start" >
                        <span>
                            <el-badge :value="3" class="item">
                                <i class="el-icon-bell"></i>
                            </el-badge>
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item >
                                <span class="pop-title">你有三个警告 </span>
                            </el-dropdown-item>

                            <el-dropdown-item  divided>
                                <div class="pop-div">
                                    <span>这是第一个警告</span>
                                </div>
                            </el-dropdown-item>
                             <el-dropdown-item  divided>
                                <div class="pop-div">
                                    <span>这是第二个警告</span>
                                </div>
                            </el-dropdown-item>
                             <el-dropdown-item  divided>
                                <div class="pop-div">
                                    <span>这是第三个警告</span>
                                </div>
                            </el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </el-col>
            </el-row>
        </div> -->
    </div>
</template>

<script>
    export default {
        data(){
            return{
                open:false
            }
        },
        methods:{
            loginOut(){
                this.$store.dispatch('loginOut').then(()=>{
                    this.$router.push({path:'/login'})
                })
            },
            collapseChage(){
                this.open = !this.open;
                this.$emit("collapse",this.open);
            }
        },
        computed:{
            loginInfo(){
                return this.$store.state.user.user;
            }
        }
    }
</script>

<style scoped lang="scss">
 .header{
    padding: 0 32px 0 40px;
    position: absolute;
    left: 0;
    right: 0;
    height: 64px;
    line-height:64px;
    z-index: 1005;
    background: #324157;
    color: rgba(49, 53, 52, 0.6);
    -webkit-box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.33);
    .logo{
        float:left;
        cursor:pointer;
        .logo_prefix{
            color:#409EFF;
        }
        .logo_suffix{
            color:#fff;
        }
    }
    .notice{
        float:right;
        span{
            display: inline-block;
            margin-left: 14px;
            font-size: 18px;
            color: #fff;
            line-height: 1px;
            height: 18px;
            cursor: pointer;
        }
    }
    .user-header{
        float:right;
        margin:0 50px;
        .userMsg{
            width: 140px;
            display: flex;
            align-items: center;
            .welcome{
                flex:1;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
            }
        }
        .header-icon{
            width:40px;
            height:40px;
            border-radius:50%;
            cursor: pointer;
        }
        .welcome{
            display:inline-block;
            color:#fff;
            .name{
                color:#409EFF;
            }
        }
    }
 }
 .pop-title{
        color:#2a8dd9 !important;
 }
 .collapse-btn{
     display:inline-block;
     margin:0 40px;
     .el-icon-menu{
         position:relative;
         top:3px;
         font-size:26px;
         color:#409EFF;
     }
 }
</style>